﻿
<fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">产品名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ProductName" id="ProductName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">产品售价</label>
                    <div class="layui-input-inline">
                        <input type="text" name="Price" id="Price" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">产品类型</label>
                    <div class="layui-input-inline">
                        <select id="ProductTypeId" name="ProductTypeId" asp-items="@ViewBag.ProductList">
                            <option value="0">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn layui-btn-primary" id="btnSearch" lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                </div>
            </div>
        </form>
    </div>
</fieldset>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add" id="add">添加</button>
    </div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<div id="page"></div>
@section Scripts{
    <script>
            layui.use(['laydate', 'laypage', 'layer', 'table'], function () {
                $ = layui.jquery;//jquery
                laydate = layui.laydate;//日期插件
                laypage = layui.laypage;//分页
                layer = layui.layer;//弹出层
                table = layui.table;

                table.render({
                    elem: '#currentTableId',
                    url: '/Admin/Product/List',
                    toolbar: '#toolbarDemo',
                    defaultToolbar: ['filter', 'exports', 'print', {
                        title: '提示',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips'
                    }],
                    cols: [[
                        { type: "checkbox", width: 50 },
                        { field: 'id', width: 80, title: 'ID', sort: true },
                        { field: 'productName', width: 180, title: '产品名称', sort: true },
                        { field: 'productmMterial', width: 120, title: '产品材质', sort: true },
                        { field: 'price', width: 120, title: '产品售价' },
                        { field: 'marketValue', title: '市场价', width: 120 },
                        { field: 'brand', width: 120, title: '品牌' },
                        { field: 'colour', width: 120, title: '颜色' },
                        { field: 'productTypeName', width: 120, title: '产品类型' },
                        { title: '操作', minWidth: 150, toolbar: '#barDemo', align: "center" }
                    ]],
                    limits: [5, 10, 15, 20, 25, 50, 100],
                    limit: 5,
                    page: true,
                    skin: 'line'
                });
                $("#btnSearch").click(function () {
                    var ProductName = $("#ProductName").val();
                    var Price = $("#Price").val();
                    var ProductTypeId = $("#ProductTypeId").val();
                    table.reload("currentTableId", {
                        where: {
                            ProductName: ProductName,
                            Price: Price,
                            ProductTypeId: ProductTypeId
                        }
                    });
                    return false;
                });
                $("#add").click(function () {
                    layer.open({
                        type: 2,
                        content: '/Admin/Product/GetInsert', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        area: ['800px', '450px']
                    });
                });
               
                //工具条事件
                table.on('tool(currentTableFilter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                    if (layEvent === 'detail') { //查看
                        //do somehing
                    } else if (layEvent === 'del') { //删除
                        layer.confirm('真的删除行么', function (index) {
                            $.post("/Admin/Product/Delete", { id: data.id }, function (re) {
                                if (re.success) {
                                    layer.msg("删除成功");
                                    $("#btnSearch").click();
                                } else {
                                    layer.msg(删除失败);
                                }
                            }, "json");
                            layer.close(index);
                            //向服务端发送删除指令
                        });
                    } else if (layEvent === 'edit') { //编辑
                        //do something

                        //同步更新缓存对应的值
                        layer.open({
                            type: 2,
                            content: '/Admin/Product/GetEdit?id=' + obj.data.id, //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                            area: ['800px', '450px']
                        });
                    } else if (layEvent === 'LAYTABLE_TIPS') {
                        layer.alert('Hi，头部工具栏扩展的右侧图标。');
                    }
                });
            });

    </script>
}
